<template>
	<view class="">
		<view class="quickValuation">
			<view class="contentBox">

				<u-cell-group>
					<u-cell-item center :value="assessInfo.modelName" :value-style="{'color':'#666'}" @click="clickCar" :arrow="true"
					 title="车辆型号">
					</u-cell-item>					
					<u-cell-item center :value="assessInfo.addresss" :value-style="{'color':'#666'}" @click="openLevel" :arrow="true"
					 title="所在城市"></u-cell-item>
					<u-cell-item center :value="assessInfo.date" :startYear="startYear"  :value-style="{'color':'#666'}" @click="clickDate" :arrow="true"
					 title="首次上牌"></u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="行驶里程">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" type="digit" v-model="dataJson.mileage" :clearable="false" input-align="right"
							 placeholder="请输入行驶里程"  @blur="lichen()" />
							<text style="margin-left: 10rpx; white-space: nowrap;">万公里</text>
						</view>
					</u-cell-item>
				</u-cell-group>
			</view>

			<view class="contentBox">
				<view class="_flex align-items_center" style="height: 80rpx;">
					<text style="color: #888;"> 以下为选填项信息</text>
					<text style="color: #002A55;">（填写完以下信息可查询违章）</text>
				</view>
				<u-cell-group>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="车架号">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" v-model="dataJson.chassis" :clearable="false" input-align="right" type="text"
							 placeholder="请输入17位车架号" />
						</view>

					</u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="车牌号">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" type="text" v-model="dataJson.licensePlate" :clearable="false" input-align="right"
							 placeholder="请输入车牌号" />
						</view>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="page">
			<u-button type="primary" class="quickValuationButton" @click="quickValuationStart">保存</u-button>
		</view>
		<view class="pages">
			<u-checkbox-group>
				<u-checkbox active-color="#002B56" v-model="assessInfo.auditCheck" shape="circle" @change="uerAgreement">
					<text style="color: #888;font-size: 24rpx;">使用本服务表明您已同意 </text>
					<text style="color: #002A55;font-size: 24rpx" @click="goUserAgreement">《用户协议》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<u-select v-model="colorShow" :list="colorList" @confirm="colorConfirm"></u-select>
		<u-picker mode="time" :defaultTime="defaultTime" :start-year="startYear" v-model="showDate" :params="params" @confirm="confirmDate">
		</u-picker>

		<level-linkage v-if="treeData.length>0" ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="treeData"
		 @onConfirm="onConfirm" themeColor='#007AFF'></level-linkage>

	</view>
</template>

<script>
	import levelLinkage from "../../components/three-level-linkage/linkage.nvue"
	import API from "@/api/addCar.js"
	import app from "../../App.vue"
	export default {
		components: {
			levelLinkage
		},
		watch:{
			
		},
		onShow() {
			this.getCity();
			const json = app.globalData.carType
			console.log(json);
			console.valueOf(json.modelYea)
			if (app.globalData.carType) {
				// this.assessInfo.carSeriesName = json.seriesName
				this.startYear = json.modelYear - 1
	
				console.log(this.startYear)
				this.dataJson.brandId = json.brandId
				this.dataJson.seriesId = json.seriesId
				this.dataJson.modelId = json.modelId
				this.assessInfo.modelName = json.modelName
				this.assessInfo.date ="请选择"
			} else {
				this.assessInfo.carSeriesName = '请选择车型'
			}
		},
		onUnload() {
			getApp().globalData.carType = ""
		},
		data() {
			return {
				startYear:'',
				pickerValueDefault: [0, 0],
				city:'11',
				treeData:[],
				assessInfo: {
					modelName: '请选择车型',
					addresss: '请选择车牌所在地',
					date: '请选择首次上牌日期',
					mileage: '', //行驶里程
					auditCheck: true,
					chassis: '',
					licensePlate: ''
				},
				defaultTime: '',
				showDate: false,
				colorShow: false, //车身颜色
				colorList: [
				],
				params: {
					year: true,
					month: true,
				},
				dataJson: {
					brandId: '',
					seriesId: '',
					modelId: '',
					cityId: '',
					carRegistrationTime: '',
					mileage: '',
					chassis: '',
					licensePlate: ''
				},
				
			};
		},
		
		methods: {
			lichen(e) {
				console.log(e)
				if(e>30){
					this.dataJson.mileage = ""
					this.$u.toast('行驶里程不能大于30');
				}
			},
			uerAgreement(e){
				console.log(e);
				this.assessInfo.auditCheck = e.value;
			},
			goUserAgreement(){
				uni.navigateTo({
					url: "/pages/login/userAgreement"
				})
			},
			openLevel() {
			    this.$refs.levelLinkage.open();
			},
			// 获取城市
			getCity(){
				API.getCity().then(res=>{
					this.treeData = res.data
				})
			},
			
			onConfirm(e) {
				this.city = e.secondPick.name;
				this.code = e.secondPick.code;
				this.assessInfo.addresss = e.secondPick.name;
				this.dataJson.cityId = e.secondPick.code;
			},
			// 选择车型
			clickCar() {
				uni.navigateTo({
					url: "../../pagesA/selectCar/selectCar"
				})
			},
			// 审核标准
			auditStandard() {
				uni.navigateTo({
					url: "pagesA/sellCar/auditStandard"
				})
			},
			scanCode() {
				var that = this;
				uni.scanCode({
					success: function(res) {
						console.log(res)
					}
				});
			},
			// 车身颜色
			colorConfirm(e) {
				this.assessInfo.color = e[0].label
			},
			// 选择日期
			clickDate() {
				let date = new Date();
				this.defaultTime = date.getFullYear() + '-' + (date.getMonth() + 1);
				console.log(this.defaultTime)
				this.showDate = true;
			},
			// 日期确定
			confirmDate(e) {
				console.log(this.startYear);
				this.assessInfo.date = e.year + '-' + e.month
				this.dataJson.carRegistrationTime = e.year + '-' + e.month + '-01'
				if(e.year =='00' || !e.year){
					this.assessInfo.date = this.startYear  + '/01'
					this.dataJson.carRegistrationTime = this.startYear + '/01'
				}
			},
			
			// 提交确认
			quickValuationStart() {
				let data = this.dataJson
				console.log(data);
				if (!data.modelId) {
					uni.showToast({
						title: "请选择车型",
						icon: "none"
					})
					return false
				}
				if (!data.cityId) {
					uni.showToast({
						title: "请选择车牌所在城市",
						icon: "none"
					})
					return false
				}
				if (!data.carRegistrationTime) {
					uni.showToast({
						title: "请选择首次上牌日期",
						icon: "none"
					})
					return false
				}
				if (!data.carRegistrationTime) {
					uni.showToast({
						title: "请填写行驶里程",
						icon: "none"
					})
					return false
				}
				if (!this.assessInfo.auditCheck) {
					uni.showToast({
						title: "请勾选用户协议",
						icon: "none"
					})
					return false
				}
				
				//正则表达式
				let reg_chassis = /^[A-HJ-NPR-Z\d]{17}$/; //车架号
				let sign_chassis = RegExp(reg_chassis).test(data.chassis);
				console.log("sign_chassis");
				console.log(sign_chassis);
				if(data.chassis && !sign_chassis ){
					this.$u.toast('请输入17位有大写字母和数字组成VIN码');
					return false
				}
				
				

				API.getAddCar(data).then(res => {
					if (res.code == 200) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.message || '请求失败',
							icon: "none"
						})
					}
				})
			}
		}
	};
</script>
<style scoped>
	.introduc {
		color: #888888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.textAreaTitle {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
	}
</style>
